<template>
  <div class="fast-search">
    <CommonSchemaForm
      ref="form"
      v-model="formData"
      :schema="schema"
      :formProps="formProps"
    ></CommonSchemaForm>
  </div>
</template>

<script>
let { cloneDeep, isObject, isEmpty, isNil } = require("lodash");
import GroupWrap from "./GroupWrap";
function deleteEmptyParams(params) {
  const clone = cloneDeep(params);
  Object.entries(clone).forEach(([key, value]) => {
    if (isObject(value) && isEmpty(value)) {
      delete clone[key];
    } else if (isNil(value) || value === "") {
      delete clone[key];
    }
  });
  return clone;
}

export default {
  props: {
    value: {
      type: null,
      default: () => ({}),
      required: true,
    },
    properties: {
      type: null,
      default: () => ({}),
      required: true,
    },
  },
  data() {
    return {
      // 表单数据
      formData: this.value,
      // 展开收起
      collapse: true,
      // 表单属性
      formProps: {
        layoutColumn: 4,
      },
    };
  },
  computed: {
    schema() {
      let sliced = this.$props.properties;
      if (this.collapse) {
        sliced = Object.entries(this.$props.properties)
          .slice(0, 3)
          .reduce((prev, cur) => {
            prev[cur[0]] = cur[1];
            return prev;
          }, {});
      }

      const hasTitle = Object.values(sliced).some((one) => one.title);
      const length = Object.values(this.$props.properties).length;

      return {
        type: "object",
        groupWrap: GroupWrap,
        needValidFieldGroup: false,
        properties: {
          ...sliced,
          actions: {
            type: "string",
            widget: "ButtonGroupWidget",
            options: {
              style: { marginTop: hasTitle ? "28px" : 0 },
              fieldStyle: { minWidth: length >= 4 ? "272px" : "184px" },
              buttons: [
                {
                  props: {
                    type: "primary",
                  },
                  children: "查询",
                  on: {
                    click: this.handleSearch,
                  },
                },
                {
                  props: {
                    type: "secondary",
                  },
                  children: "重置",
                  on: {
                    click: this.handleReset,
                  },
                },
                {
                  children: (h) => {
                    if (Object.keys(this.$props.properties).length <= 3) return;
                    return h(
                      "common-button",
                      {
                        props: {
                          type: "link",
                        },
                        on: {
                          click: this.handleCollapse,
                        },
                      },
                      [
                        this.collapse ? "展开" : "收起",
                        h("i", {
                          class: {
                            "el-icon--right": true,
                            [this.arrowIconClassName]: true,
                          },
                        }),
                      ]
                    );
                  },
                },
              ],
            },
          },
        },
      };
    },
    arrowIconClassName() {
      return this.collapse ? "el-icon-arrow-down" : "el-icon-arrow-up";
    },
  },
  watch: {
    value(newValue, oldValue) {
      if (newValue === oldValue) return;
      this.formData = newValue;
    },
    formData: {
      handler(newValue, oldValue) {
        this.emitFormDataChange(newValue, oldValue);
      },
      deep: true,
    },
  },
  methods: {
    emitFormDataChange(newValue, oldValue) {
      // 支持v-model ，引用类型
      this.$emit("input", newValue);

      // change 事件，引用类型修改属性 newValue
      this.$emit("on-change", {
        newValue: newValue,
        oldValue: oldValue,
      });
    },
    handleCollapse() {
      this.collapse = !this.collapse;
    },
    handleSearch() {
      this.$emit("search", deleteEmptyParams(this.formData));
    },
    handleReset() {
      this.reset();
      this.$emit("reset");
    },
    reset() {
      this.$refs.form.resetFields();
    },
  },
};
</script>

<style scope>
.fast-search .c-button.c-button--link {
  padding-left: 0px;
  padding-right: 0px;
  min-width: auto;
}

.fast-search
  .layout-column.layout-column-4
  .field-group-wrap__box
  > .gen-form-item {
  flex: 1 1 0%;
  flex-basis: 0%;
  width: 25%;
  min-width: auto;
  box-sizing: border-box;
}

.fast-search
  .layout-column.layout-column-4
  .field-group-wrap__box
  .divider
  + .gen-form-item
  .button-group-widget {
  margin-top: 0 !important;
}
</style>
